<template>
  <div class="header">
    <header-item>
      <div slot="homeSlot">
        <img src="../assets/imgs/search.png" alt="" class="l_img" />
        <input type="text" placeholder="影视 图书 唱片 小组等" />
        <img src="../assets/imgs/扫码.png" alt="" class="m_img" />
        <img src="../assets/imgs/chat.png" alt="" class="r_img" />
      </div>
      <div slot="movieSlot">
        <span>书影音</span>
        <img src="../assets/imgs/search_selected.png" alt="" class="m_img" />
        <img src="../assets/imgs/chat-selected.png" alt="" class="r_img" />
      </div>
      <!-- 广播 -->
      <div slot="broadcastSlot">
        <span>广播</span>
        <img src="../assets/imgs/searchuser.png" alt="" class="m_img" />
        <img src="../assets/imgs/chat-selected.png" alt="" class="r_img" />
      </div>
      <!-- 小组 -->
      <div slot="groupSlot">
        <span>小组</span>
        <img src="../assets/imgs/search_selected.png" alt="" class="m_img"/>
        <img src="../assets/imgs/chat-selected.png" alt="" class="r_img" />
      </div>
      <!-- 我的 -->
      <div slot="mySlot">
        <span>我的</span>
        <img src="../assets/imgs/setting.png" alt="" class="r_img" />
      </div>
    </header-item>
  </div>
</template>

<script>
import HeaderItem from "./HeaderItem.vue";
export default {
  components: {
    HeaderItem,
  },
  data() {
    return {
      currentHeader: "homeSlot",
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  z-index: 999;
  input {
    width: 265px;
    height: 26px;
    border-radius: 7px;
    outline: none;
    border: 1px solid #ccc;
    text-indent: 45px;
  }
  .l_img {
    height: 25px;
    margin: 2px 2px;
    position: absolute;
  }
  .m_img {
    height: 25px;
    line-height: 25px;
    right: 18%;
    top: 9.5px;
    position: absolute;
  }
  .r_img {
    position: absolute;
    height: 25px;
    top: 10px;
    right: 10px;
  }
  span {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: rgb(144, 136, 136);
    text-align: center;
    // line-height: 45px;
    width: 310px;
  }
}
</style>